<template>
  <div class="xindianfirst">
    <!--<div class="headerDiv"></div>-->

    <div class="aui-bar aui-bar-nav aui-barPailuan">
      <!--<a class="aui-pull-left aui-padded-l-15 icon iconfont icon-fanhuijiantou1 " style="color:#0075f0 !important;" @click="goBack()">-->
      <!--<div style="color: black;margin-left: 1rem">排卵</div>-->
      <!--</a>-->
      <a class="aui-pull-left">
        <img style="width: 2.5rem;;" src="../../../../static/img/back-b.png" alt=""  @click="goBack()">
        <div >
        <span style="margin-top:-0.85rem;left:4.5rem;position: absolute;color: black; font-size: 18px;	font-family: 'Helvetica Neue', Helvetica, sans-serif;">
              可视心率
            </span>
        </div>
      </a>
    </div>
    <section class="sectionMagin">

      <div class="textColor" style="padding-top: 3.8rem">
        <div class="step1 ">
          <img class="heartImg1" src="../img/step.gif" alt="">
        </div>
        <div class="clearfloat"></div>
        <div  class="aui-font-size-14 heartStep">
          <div class="aui-margin-b-15">
            <span class="radioStyle" style="font-size: 12px">1</span>
            <span class="aui-padded-l-10 fontSize" style="font-size: 14px;color: rgba(0,0,0,0.5)">手轻握马桶右侧三角按键底部的金属传感器</span>
          </div>
          <div>
            <span class="radioStyle" style="font-size: 12px">2</span>
            <span  class="aui-padded-l-10 fontSize" style="font-size: 14px;color: rgba(0,0,0,0.5)">请保持手、大腿与心电传感接触的肌肤湿润</span>
            <br>
            &nbsp;  &nbsp; &nbsp; <span  class="fontSize" style="font-size: 14px;color: rgba(0,0,0,0.5)">（可用清水湿润肌肤）</span>
          </div>
        </div>
      </div>

      <div @click="goPath('/xindiansecond')" class="aui-btn SubBtnXindian bottomBtn">下一步</div>
    </section>
    <addtoAlert v-if="showAddtoAlert"></addtoAlert>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import Loading from '../../common/Loading'
  import addtoAlert from '../../common/addtoAlert'

  export default {
    name: 'XinDianFirst',
    data () {
      return {
      }
    },
    computed: {
      ...mapState([
        'showAddtoAlert','waitTimeXinDian'
      ])
    },
    components: {
      Loading,
      addtoAlert
    },
    created () {

    },
    methods: {
      ...mapMutations([ 'SETwaitTimeXinDian','TOTLECALLBACK','SETXinDArray'
      ]),
      goBack(){
        var u = navigator.userAgent
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

        if (isiOS === true) {
          window.hilink.setTitleVisible(true)
        }
        this.$router.go(-1)
      },
      goPath (pth) {
        this.startX()
        var u = navigator.userAgent
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

        if (isiOS === true) {
          this.$router.push({path: pth})
        }else{
          this.$router.replace({path: pth})
        }
      },
      stringToBytes ( str ) {
        var ch, st, re = [];
        for (var i = 0; i < str.length; i++ ) {
          ch = str.charCodeAt(i);  // get char
          st = [];                 // set up "stack"
          do {
            st.push( ch & 0xFF );  // push byte to stack
            ch = ch >> 8;          // shift value down by 1 byte
          }
          while ( ch )
          re = re.concat( st.reverse() );
        }
        return re
      },
      startX () {
        this.SETXinDArray()
        window.setwaitTimeXinDian(1)
        clearInterval(window.setWaitTimeInter)
         window.setWaitTimeInter = setInterval(function() {
           window.setwaitTimeXinDian(0)
          }, 1000)
        var reArray = this.stringToBytes('m00000-140-01\r\n')
        console.log('写入数据' + reArray)
        window.writeFunction(reArray)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @media screen and (max-width:320px){
    /*body{font-size: 12px;}*/
    .order{padding-top:0.1rem; padding-right: 0.1rem;}
    .stepImg2 img{height:5rem}
  }
  @media screen and (min-width:321px) and (max-width:376px){
    /*body{font-size: 14px;}*/
  }
  @media screen and (min-width:377px) and (max-width:415px){
    /*body{font-size: 16px;}*/
    .order{padding-right: 0.1rem;}
  }
  body{background: #fff !important;}
  .aui-barPailuan{
    border-bottom: 2px solid #e2e2e2;
    background: #ffffff;

  }
  .aui-bar a{
    color:#000;
    font-size: 20px!important;
    font-weight: bold!important;
  }
  .heartImg1{  /*心率图片设置*/
    display: block;
    width:70%;
    margin:2rem auto;
    /*margin-top:2rem;*/
  }
  .order{
    margin-top:1rem;
    margin-left:2rem;
    width:1.5rem;
    height:1.5rem;
    border-radius: 1rem;
    font-size: 1rem;
    background: #ccc;
    text-align: center;
    color:#000;
  }
  .method{
    width:80%;
    margin:auto;
  }
  .stepImg2 img{height:10rem;margin:auto}
  .stepImg3 img{width:80%;margin:auto;padding-top:5rem}
  .yunQistep2 img{height:8rem;margin:auto}

  .niaoJian4{
    width:100%;
    height:18rem;
    position: relative;
  }
  .niaoJian4 img{display:block;width:2.5rem;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}
  .niaoJian4 .public{
    width:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-25%;
    margin-left:-25%;
    z-index: 999;
  }
  .niaoJian4 .publicItem{
    width:30%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-15%;
    margin-left:-15%;
    z-index: 999;
  }
  .niaoJian4 .outer_1{top:-70%}
  .niaoJian4 .outer_2{bottom:-70%}
  .niaoJian4 .outer_3{left:-70%}
  .niaoJian4 .outer_4{right:-70%}
  .niaoJian4 .outer_5{top:-50%;right:-50%}
  .niaoJian4 .outer_6{top:-50%;left:-50%}
  .niaoJian4 .outer_7{bottom:-50%;right:-50%}
  .niaoJian4 .outer_8{bottom:-50%;left:-50%}

  /*是否怀孕样式*/
  .verify img{width:80%;margin:auto}
  .weiHuaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;right:0}
  .huaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;left:0}


  /*排卵*/
  .ovulation{position: absolute;top:50%;margin-top:-25%;left:50%;margin-left:-25%}



  .borStyle{
    width:90%;
    border:1px solid #ccc;
    margin:0 5%;
  }
  .bHint{
    width:100%;
    /*position: absolute;*/
    /*bottom:1rem;*/
  }
  .SubBtnXindian{
    width: 90%;
    height: 3rem!important;
    line-height: 3rem!important;
    margin: 0 5%!important;
    color: #0075f0;
    font-size: 1.2rem!important;
    border: 1px solid #eee;
    border-radius: 1.5rem!important;
    background: #f7f7f7!important;
  }
  .step2{
    width:100%;
  }


  /*可视心率showHeart1页面的样式*/
  .heartStep{
    padding-left:1.5rem;
  }
  .radioStyle{
    display: inline-block;
    width:1.6rem;
    height:1.6rem;
    background: #008fd9;
    color: #fff;
    border-radius: 50%;
    text-align: center;
  }


  .audio{
    display: block;
    width:4rem;
    margin:auto;
    margin-top:-3rem;
  }
  .heartData{
    border-right:1px solid #ccc;
  }


  .textColor{
    font-size: 12px;
    color: rgba(0,0,0,0.5)
  }
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
  .clearfloat{zoom:1}
  .aui-bar{
    padding-top: 25px !important;
    padding-left: 10px !important;
    padding-bottom: 5px !important;
  }
  .aui-bar a{
    padding: 0 !important;
    /*padding-bottom: 1px !important;*/
    /*padding-left: 30px !important;*/
    /*padding-right: 30px !important;*/
  }

</style>

